<template>
    <div class="auth-container">
      <div class="auth-card">
        <div class="auth-header">
          <h2>注册新账号</h2>
        </div>
        
        <el-form 
          :model="registerForm" 
          :rules="registerRules" 
          ref="registerForm" 
          class="auth-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="email">
            <el-input
              v-model="registerForm.email"
              placeholder="请输入邮箱"
              prefix-icon="el-icon-message"
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="code">
            <div class="code-input-container">
              <el-input
                v-model="registerForm.code"
                placeholder="请输入验证码"
                prefix-icon="el-icon-key"
              ></el-input>
              <el-button
                class="send-code-btn"
                :disabled="codeCountdown > 0"
                @click="sendCode"
              >{{ codeCountdown > 0 ? `${codeCountdown}s后重试` : '获取验证码' }}</el-button>
            </div>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              placeholder="请确认密码"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="agree">
            <el-checkbox v-model="registerForm.agree">我已阅读并同意</el-checkbox>
            <el-link type="primary" :underline="false">《用户协议》</el-link>
            <span>和</span>
            <el-link type="primary" :underline="false">《隐私政策》</el-link>
          </el-form-item>
          
          <el-form-item>
            <el-button
              type="primary"
              class="auth-button"
              :loading="loading"
              @click="handleRegister"
            >注册</el-button>
          </el-form-item>
        </el-form>
        
        <div class="auth-footer">
          <span>已有账号?</span>
          <el-link type="primary" :underline="false" @click="goLogin">立即登录</el-link>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "RegisterView",
    data() {
      const validateEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入邮箱'));
        }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
          return callback(new Error('请输入正确的邮箱格式'));
        }
        callback();
      };
      
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入密码'));
        }
        if (value.length < 6 || value.length > 20) {
          return callback(new Error('密码长度在 6 到 20 个字符'));
        }
        if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/.test(value)) {
          return callback(new Error('需包含大小写字母和数字'));
        }
        callback();
      };
      
      const validateConfirmPassword = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请再次输入密码'));
        }
        if (value !== this.registerForm.password) {
          return callback(new Error('两次输入密码不一致'));
        }
        callback();
      };
      
      const validateAgree = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请阅读并同意协议'));
        }
        callback();
      };
      
      return {
        registerForm: {
          username: '',
          email: '',
          code: '',
          password: '',
          confirmPassword: '',
          agree: false
        },
        codeCountdown: 0,
        loading: false,
        registerRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { len: 6, message: '验证码长度为6位', trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: validateConfirmPassword, trigger: 'blur' }
          ],
          agree: [
            { validator: validateAgree, trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      handleRegister() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.loading = true;
            // 模拟注册请求
            setTimeout(() => {
              this.loading = false;
              this.$message.success('注册成功');
              this.$router.push('/login');
            }, 1000);
          }
        });
      },
      sendCode() {
        this.$refs.registerForm.validateField('email', valid => {
          if (!valid) {
            this.codeCountdown = 60;
            const timer = setInterval(() => {
              this.codeCountdown--;
              if (this.codeCountdown <= 0) {
                clearInterval(timer);
              }
            }, 1000);
            
            // 模拟发送验证码
            this.$message.success('验证码已发送至您的邮箱');
          }
        });
      },
      goLogin() {
        this.$router.push('/login');
      }
    }
  };
  </script>
  
  <style lang="less" scoped>
  .auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    background-image: linear-gradient(to bottom right, #2c3e50, #34495e);
    
    .auth-card {
      width: 420px;
      padding: 40px;
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .auth-header {
        margin-bottom: 30px;
        text-align: center;
        
        h2 {
          color: #2c3e50;
          font-size: 24px;
          font-weight: 500;
        }
      }
      
      .auth-form {
        .code-input-container {
          display: flex;
          
          .el-input {
            flex: 1;
            margin-right: 10px;
          }
          
          .send-code-btn {
            width: 120px;
          }
        }
        
        .auth-button {
          width: 100%;
          margin-top: 10px;
          background-color: #2c3e50;
          border-color: #2c3e50;
          
          &:hover {
            background-color: #34495e;
            border-color: #34495e;
          }
        }
        
        .el-checkbox {
          margin-right: 5px;
        }
        
        .el-link {
          margin: 0 3px;
          font-size: 14px;
        }
      }
      
      .auth-footer {
        margin-top: 20px;
        text-align: center;
        color: #909399;
        
        .el-link {
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }
  }
  </style>